<template>
    <div class="register-wrapper">
        <Card class="register-from" style="width:480px">
            <Form
                    ref="registerForm"
                    :model="registerForm"
                    :rules="ruleInline"
                    :label-width="100"
            >
                <FormItem prop="loginName" label="登录名">
                    <Input
                            type="text"
                            v-model="registerForm.loginName"
                            placeholder="Username"
                    >
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password" label="密码">
                    <Input
                            type="password"
                            v-model="registerForm.password"
                            placeholder="Password"
                    >
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="passwdCheck" label="再输一次密码">
                    <Input
                            type="password"
                            v-model="registerForm.passwdCheck"
                            placeholder="Password"
                    >
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="nickName" label="用户名">
                    <Input
                            type="text"
                            v-model="registerForm.nickName"
                            placeholder="Username"
                    >
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="email" label="邮箱">
                    <Input type="text" v-model="registerForm.email" placeholder="Email">
                        <Icon type="ios-mail" slot="prepend"/>
                    </Input>
                </FormItem>
                <FormItem prop="roleId" label="注册类型">
                    <RadioGroup v-model="registerForm.roleId">
                        <Radio v-for="role in roles" :key="role.id" :label="role.id">
                            <span>{{ role.remark }}</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem prop="captcha" label="验证码">
                    <Row>
                        <Col span="12">
                            <Input
                                    type="text"
                                    v-model="registerForm.captcha"
                                    placeholder="验证码"
                                    style="width: 80px"
                            />
                        </Col>
                        <Col span="12"
                        ><img class="captcha-img" :src="captcha_src" @click="refreshCap"
                        /></Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Button
                            style="margin-left: 8px"
                            type="primary"
                            @click="handleSubmit('registerForm')"
                    >注册
                    </Button>
                    <Button style="margin-left: 8px" type="primary" @click="goToLogin"
                    >返回登录页面
                    </Button>
                </FormItem>
            </Form>
        </Card>
    </div>
</template>

<script>
    import {getCode, getPublicRoles, register} from "@/api";

    const uuidv1 = require("uuid/v1");
    export default {
        name: "register",
        created() {
            this.refreshCap();
            getPublicRoles().then(res => {
                this.roles = res.data.roles || [];
            });
        },
        data() {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.registerForm.passwdCheck !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.registerForm.validateField('passwdCheck');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再输入一次密码'));
                } else if (value !== this.registerForm.password) {
                    callback(new Error('两次密码不匹配!'));
                } else {
                    callback();
                }
            };
            return {
                registerForm: {
                    loginName: "",
                    password: "",
                    passwdCheck: '',
                    captcha: "",
                    roleId: "",
                    email: "",
                    nickName: "",
                    uuid: uuidv1()
                },
                captcha_src: "",
                roles: [],
                ruleInline: {
                    loginName: [
                        {required: true, message: "请输入登录名", trigger: "blur"}
                    ],
                    nickName: [
                        {required: true, message: "请输入用户名", trigger: "blur"}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {type: "email", message: '邮箱格式不正确', trigger: 'blur'},

                    ],
                    roleId: [
                        {required: true, message: '请选择注册类型', trigger: "change", type: "number"},
                    ],
                    password: [{required: true, validator: validatePass, trigger: "blur"}],
                    passwdCheck: [{required: true, validator: validatePassCheck, trigger: 'blur'}],
                    captcha: [{required: true, message: "请输入验证码", trigger: "blur"}]
                }
            };
        },
        methods: {
            goToLogin() {
                this.$router.push("login");
            },
            /** 请求验证码 */
            refreshCap() {
                getCode(this.registerForm.uuid).then(res => {
                    this.captcha_src = res;
                    this.registerForm.captcha = "";
                });
            },
            handleSubmit(name) {

                this.$refs[name].validate((valid) => {
                    if (valid) {
                        register(this.registerForm).then((data) => {
                            if (data.meta !== undefined && data.meta.isSuccess === false) {
                                this.$Message.error(data.meta.msg);
                                this.refreshCap()
                            } else {
                                this.$router.push({name: 'login'});
                                this.$Message.success('注册成功');
                            }
                        })
                    } else {
                        this.$Message.error('错误!');
                    }
                })
            }
        }
    };
</script>

<style lang="scss">
    .register-wrapper {
        background: #2c3e50;
        height: 100vh;
    }

    .register-from {
        max-height: 600px;
        max-width: 680px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
